<template>
    <div class="wai">
        <!--轮播图区域-->

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <MySwiper :imgList="imgList"></MySwiper>
                </div>
            </div>
        </div>
        <!--商品购买区域-->
        <div class="mui-card">
            <div class="mui-card-header">{{ goods_info.name }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        定价：
                        <span>￥{{ goods_info.price }}</span>
                    </p>
                    <div v-if="goods_info.count">
                        <!-- 加减数量的组件 -->
                        <div class="go-num">
                            购买数量
                            <NumBox @count="countChanged" :max="goods_info.count" initCount="1" :goodsid="goodsid"></NumBox>
                        </div>
                        <div class="go-buy">
                            <mt-button type='primary' size='small' @click="go_pay">立即购买</mt-button>
                            <mt-button type='danger' size='small' @click="join_the_shopping_cart">加入购物车</mt-button>
                        </div>
                    </div>
                    <div v-else>商品暂时无货</div>
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品卖点：{{ goods_info.bewrite }}</p>
                    <p>库存情况：{{ goods_info.count }}</p>
                </div>
            </div>
        </div>
        
    </div>
</template>
  
<script>

import MySwiper from '../MySwiper.vue'
import NumBox from '../NumBox.vue'
export default {
    props: ['id'],
    data() {
        return {
            goods_info: [],
            imgList: [],
            goodsid: this.id,
            order_id:0,
            orders: {
                session_id: this.$auth.getAuthorization(),
                goods_id: this.id,
                count: 1,
                goods_prace: null,

            }
        }
    },
    components: {
        MySwiper,
        NumBox
    },
    created() {
        this.getGoodsList();
    },
    mounted() { },
    methods: {
        getGoodsList() {
            this.$http.get(
                "goods_info.php", { params: { 'goods_id': this.id } }
            ).then(res => {
                if (res.data.status === 1) {
                    this.goods_info = res.data.data;
                    this.goods_info = this.goods_info[0];
                    this.imgList.push(this.goods_info.content_img1_path.slice(1));
                    this.imgList.push(this.goods_info.content_img2_path.slice(1));
                    this.imgList.push(this.goods_info.content_img3_path.slice(1));
                    console.log(this.imgList);
                    this.orders.goods_prace = this.goods_info['price'];
                } else {
                    alert(res.data.message);
                }
            }).catch(() => {
                console.log('失败');
            });
        },
        countChanged(val) {
            // this.selectCount = val.count
            console.log(val)
            this.orders.count = val.count;
        },
        join_the_shopping_cart() {
            if (this.orders.session_id !== null) {
                this.$http.post('add_goods_to_cat.php', this.orders,
                    {
                        headers: {
                            'Content-Type': 'application/json' // 设置请求头
                        }
                    }).then(response => {
                        if (response.data.status === 1) {
                            alert(response.data.message);
                            // console.log(response.data.message);
                        } else {
                            alert(response.data.message);
                            // console.log(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.error(error);
                    });
            } else {
                alert('你还未登录，请先登录！');
                this.$router.push('/user');
            }
        },
        go_pay() {
            if (this.orders.session_id !== null) {
                this.$http.post('create_orders.php', this.orders,
                    {
                        headers: {
                            'Content-Type': 'application/json' // 设置请求头
                        }
                    }).then(response => {
                        if (response.data.status === 1) {
                            this.order_id=response.data.order_id;
                            alert(response.data.message);
                            this.$router.push({
                                name: 'pay_info', params: {
                                    id: this.order_id
                                }
                            });
                            // console.log(response.data.message);
                        } else {
                            alert(response.data.message);
                            // console.log(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.error(error);
                    });

            } else {
                alert('你还未登录，请先登录！');
                this.$router.push('/user');
            }
        }

    }
}
</script>
  
  
  
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.wai {
    height: 895px;
    overflow-y: scroll;

    // padding: 3px;
    .mui-card {
        width: 99%;

        // height: 500px;
        .mui-card-header {
            margin-top: 1%;
            font-size: 50px;
        }

        .price {
            font-size: 20px;
        }

        .go-num {
            font-size: 30px;
            padding-top: 3%;
            text-align: center;
            // border: 1px solid red;
        }

        .go-buy {
            // border: 1px solid red;
            font-size: 20px;
            text-align: center;
            padding: 2%;

        }

        .mui-card-content-inner p {
            font-size: 20px;
            margin-top: 3%;
        }
    }
}</style>